<template>
    <div class="searchBar">
        <el-button type="primary" @click="onSubmit">查询</el-button>
    </div>
    <div>
        <el-table :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%"
            max-height="250">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="id" label="用户编号" width="200" />
            <el-table-column prop="nickName" label="用户昵称" width="200" />
            <el-table-column prop="avatarUrl" label="用户头像" width="200">
                <template #default="scope">
                    <el-image style="width:80px;height:80px" :src="scope.row.avatarUrl"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="username" label="姓名" width="200" />
            <el-table-column prop="sex" label="性别" width="200">
                <template #default="scope">
                    <span v-if="scope.row.sex == 1">女</span>
                    <span v-if="scope.row.sex == 0">男</span>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" width="200" />
            <el-table-column prop="address" label="Address" width="600" />
            <el-table-column fixed="right" label="操作" width="300">
                <template #default="scope">
                    <el-button  type="primary" size="small" @click.prevent="deleteRow(scope.$index)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table> 
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="currentPage" :page-size="pagesize" layout="prev, pager, next, jumper"
            :total="tableData.length" v-if="(tableData.length != 0)">
        </el-pagination> 
    </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
// import { getUserAllRoles } from '@/api/users'
// import { UserModule } from '@/store/modules/user'
import { getAllUsers , deleteUser} from '@/apis/users'
import type { FormInstance } from 'element-plus'
import { ElMessage, ElMessageBox, ElLoading } from 'element-plus'
import type { Action } from 'element-plus'

const tableData = ref([])

const loading = ref(false);

//查询
const onSubmit = async() => {
    loading.value = true;
    try {
        const seachUsers:any =await getAllUsers();
        console.log(seachUsers);
        tableData.value = seachUsers.result
        loading.value = true;
    } catch (error) {
     console.log(error);
    }
}


//分页
const pagesize = ref(2)//每页多少个
const handleSizeChange = (size: any) => {
    // console.log(size);     
    pagesize.value = size;
    // console.log(pagesize.value); //每页下拉显示数据
}

const currentPage = ref(1)//默认第几页
const handleCurrentChange = (current: any) => {
    // console.log(current); 
    currentPage.value = current
    // console.log(currentPage.value); //点击第几页
}

//删除
const deleteRow = (index: number) => {
    let data = tableData.value[pagesize.value * (currentPage.value - 1) + index]  
    loading.value = true;
    ElMessageBox.confirm(
        '确定要删除这个用户吗?',
        '警告',
        {
            confirmButtonText: '确定删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        const loading = ElLoading.service({
            lock: true,
            text: 'Loading',
            background: 'rgba(0, 0, 0, 0.7)',
        })
        try {
            const deleteResult: any = await deleteUser(data.id);
            if (deleteResult.success) {
                ElMessage({
                    type: 'info',
                    message: deleteResult.message,
                })
            } else {
                ElMessage({
                    type: 'warning',
                    message: deleteResult.message,
                })
            }
            loading.close()
            onSubmit()
        } catch (error) {
            loading.close()
            console.log(error)
        }
    }).catch((error) => {
        console.log(error)
    })


}


</script>

<style scoped>
.searchBar {
    margin-top: 20px;
    margin-bottom: 20px;
}

.el-alert {
    margin: 20px 0 0;
}

.el-alert:first-child {
    margin: 0;
}
</style>